<template>
<div>

	<el-row>
		<el-alert
		    title="第一张图片会作为产品的封面图片"
		    type="info"
		    :closable="false">
		</el-alert>
	</el-row>

	<el-row :gutter="20" class="mt10">
	  	<el-col v-for="(item, index) in images"  :span="4" class="text-center mt10">
	  		<img :src="item.url" width="100%" height="148" 
	  		@click="handlePictureCardPreview(item)" class="pointer">
	  		<el-button-group>
			  <el-button type="primary" size="small" icon="el-icon-caret-left"
			  v-if="index != 0"
			  @click="imageUp(index)"
			  ></el-button>
			  <el-button type="primary" size="small" icon="el-icon-caret-right"
			  v-if="index != images.length - 1"
			  @click="imageDown(index)"></el-button>
			  <el-button type="primary" size="small" icon="el-icon-delete"
			  @click="imageDel(index)"></el-button>
			</el-button-group>
	  	</el-col>


	  	<el-col :span="4" class="mt10">
	  		<el-upload
			  :action="URL.upload"
			  :data="para"
			  list-type="picture-card"
			  :before-upload="beforeAvatarUpload"
			  :on-success="success"
			  :on-preview="handlePictureCardPreview"
		  	  :on-remove="handleRemove"
		  	  :multiple="true"
		  	  :show-file-list="false"
			  >
			  <i class="el-icon-plus"></i>
			</el-upload>
	  	</el-col>
	</el-row>
	
	<el-dialog :visible.sync="dialogVisible">
	  <img width="100%" :src="dialogImageUrl" alt="">
	</el-dialog>


	<el-form ref="form" class="mt20 text-right">

	  <el-form-item>
	    <el-button type="primary" size="medium" @click="onSubmit('form')">确认修改</el-button>
	  </el-form-item>

	</el-form>

</div>		
</template>

<script>

import { mapGetters } from 'vuex';

export default {
	name: 'imagetext',
	
	data () {
		return {
			
		  	dialogVisible : false,
		  	dialogImageUrl : '',
		  	imagearr : [],
		  	images : (() => {
		  		var toppic = [];
				try {
					toppic = JSON.parse(this.productDetail.top_pic);
				} catch (err) {
					
				}
				console.log(toppic);
				return toppic;
		  	})(),
		}
	},

	props: {
	  	productDetail : Object,
	},

	components: {
		
	},

	computed : {
		...mapGetters([
			'userInfo',
			'URL',
			'common',
		]),

		para () {
			return {
				dir : this.userInfo.company_code + '/product/' + this.productDetail.code + '/',
			}
		},

	},

	methods : {
		beforeAvatarUpload (file) {
	        const isLtM = file.size / 1024 / 1024 < this.common.imgMaxSize;

	        if (!isLtM) {
	          this.$message.error('上传图片大小不能超过 ' + this.common.imgMaxSize + 'MB!');
	        }
	        return isLtM;
		},

		success (res, file) {
			
            var obj = {
            	url : res.url,
            	w : 0,
            	h : 0,
            }
			this.images.push(obj);
		},

		handleRemove(file, fileList) {
	        console.log(file, fileList);
	    },

	    handlePictureCardPreview(item) {
	        this.dialogImageUrl = item;
	        this.dialogVisible = true;
	    },


	    onSubmit () {
	    	//顶图要把图片宽度高度也存进去。
			var image_txt = '';
			for(var i = 0, j = this.images.length; i < j; i++){
				var tmp = this.images[i];
				var theImage = new Image();  
	            theImage.src = tmp.url;
	            tmp.w = theImage.width;
	            tmp.h = theImage.height;
			}

			image_txt = JSON.stringify(this.images);

			console.log(image_txt);

			var para = {
				id : this.productDetail.id,
				sale_code : this.productDetail.sale_code,
				top_pic : image_txt,
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '保存成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '保存失败',
			          message: res,
			          type: 'error'
			        });
				}
			};
			console.log(para);
			this.$store.dispatch('updateProduct_image', para);
	    },


	    imageDel (index){
			this.images.splice(index, 1);
		},

		imageDown (index){
			this.images[index] = this.images.splice(index + 1, 1, this.images[index])[0];
		},

		imageUp (index){
			this.images[index] = this.images.splice(index - 1, 1, this.images[index])[0];
		},
	},

	watch:{
	    
	},

	mounted () {
		
		
	},

}
</script>

<style scoped>

</style>
